<template>
  <div class="home_box">
    <!-- 头部 -->
    <header>
      <h1>
        <i class="iconfont icon-yinle"></i>
        <span>涛的网抑云</span>
      </h1>
      <div class="download">下载App</div>
    </header>
    <!-- 中间 -->
    <main :class="{ btm: song_id }">
      <van-tabs border v-model="tab_act" @change="tab_change">
        <van-tab name="Recommend" title="推荐音乐"></van-tab>
        <van-tab name="Rank" title="飙升榜"></van-tab>
        <van-tab name="Search" title="搜索"></van-tab>
      </van-tabs>
      <!-- 用于渲染二级路由内容 -->
      <keep-alive>
        <router-view />
      </keep-alive>
    </main>
    <!-- 底部 -->
    <transition name="offset">
      <play-bar v-show="song_id"></play-bar>
    </transition>
  </div>
</template>

<script>
import PlayBar from "@/components/common/PlayBar";
import { mapState } from "vuex";
export default {
  data() {
    return {
      tab_act: "Rank",
    };
  },
  components: {
    PlayBar,
  },
  computed: {
    // 歌曲id
    ...mapState(["song_id"]),
  },
  methods: {
    // 导航栏切换
    tab_change(name) {
      // console.log(name, title);
      this.$router.push({
        name,
      });
    },
  },
  watch: {
    // 监听路由的改变
    $route: {
      handler(val) {
        let path = ["Recommend", "Rank", "Search"];
        if (path.includes(val.name)) {
          // 修复导航闪动
          this.tab_act = val.name;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
// dart-sass 用 ::v-deep
// ::v-deep .van-tabs__nav {
//   background-color: seagreen;
// }

.offset-enter {
  transform: translateY(100%);
}
.offset-enter-active,
.offset-leave-active {
  transition: all 0.3s;
}
header {
  position: fixed;
  width: 100%;
  height: 84px;
  background-color: #d43c33;
  padding: 0 10px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 99;
  h1 {
    font-size: 24px;
    font-weight: normal;
    vertical-align: middle;
    i {
      font-size: 24px;
      padding-right: 8px;
    }
  }
  .download {
    background-color: #fff;
    height: 36px;
    width: 100px;
    color: #d43c33;
    line-height: 36px;
    text-align: center;
    border-radius: 36px;
  }
}
main {
  padding-top: 84px;
  &.btm {
    padding-bottom: 60px;
  }
}
</style>
